<template>
	<view class="container">
		<view class="nav">
			<view class="header">
				<view class="left">
					<view class="store-name">
						<text></text>
						<!-- <view class="iconfont iconarrow-right"></view> -->
					</view>
				</view>
				<view class="right">
					<view class="dinein" :class="{active: type == 1}" @click="goMenu()">
						<text>点餐</text>
					</view>
					<view class="takeout" :class="{active: type == 2}" @click="goOrder()">
						<text>订单</text>
					</view>
				</view>
			</view>
		</view>
	
		<view class="content">
				<view class="orders-list d-flex flex-column w-100" style="padding: 20rpx; padding-bottom: 0;">
						<view class="order-item" v-for="(item, index) in orders" :key="index" style="margin-bottom: 30rpx;" @tap="detail(item.id)">
							<list-cell :hover="false" last>
								<view class="w-100 d-flex flex-column">
									<view class="d-flex font-size-base text-color-base align-items-center" style="margin-bottom: 20rpx;">
										<view>订单编号：{{ item.orderNo }}</view>
										<view class="iconfont iconarrow-right" style="margin-left: 10rpx;"></view>
									</view>
									<view class="font-size-sm text-color-assist" style="margin-bottom: 20rpx;">
										{{ orderGoodsName(item.goods) }}
									</view>
									<view class="d-flex justify-content-between align-items-center" style="margin-bottom: 30rpx;">
										<view class="font-size-sm text-color-assist">
											<!-- {{ $util.formatDateTime() }} -->
											{{item.createdAt}}
										</view>
										<view class="d-flex font-size-sm text-color-base align-items-center">
											<view style="margin-right: 10rpx;">共{{ item.goodsNum }}件商品，实付</view>
											<view class="font-size-lg">￥{{ item.amount }}</view>
										</view>
									</view>
								</view>
							</list-cell>
						</view>
					</view>
				
			</view>
		
	</view>
</template>

<script>
	import listCell from '@/components/list-cell/list-cell'
	import {
		mapMutations,
		mapState,
		mapGetters,
	
	} from 'vuex'
	const {getOrderPage} = require('@/api/api/order.js')
	export default {
		components: {
			listCell
		},
		data() {
			return {
				page: 1,
				pageSize: 5,
				pages:null,
				orders: []
			}
		},
		computed: {
			...mapGetters('user',['isLogin']),
			...mapState([ 'seat','type']),
			
			orderGoodsName() {
				return (goods) => {
					let arr = []
					goods.forEach(good => arr.push(good.name + '*' + good.num))
					return arr.join('，')
				}
			}
		},
		async onLoad() {
			
			if(!this.isLogin) {
				uni.navigateTo({url: '/pages/login/login'})
			} 
			
			
			this.SET_TYPE(2)
			await this.getOrders()
		}, 
		async onReachBottom() {
			console.log("到底了")
			if(this.pages!=null&&this.pages>=this.page)
				await this.getOrders()
		},
	
		methods: {
			...mapMutations(['SET_TYPE']),
			
			
			async getOrders() {
				
				uni.showLoading({
					title: '加载中'
				})
				const param = {
					"currentPage":this.page,
					"pageSize" : this.pageSize
				}
				
				const res = await getOrderPage(param)
				let orders = res.data.records;
				this.pages = res.data.pages;
				console.log(this.pages)
				console.log(orders)
			
				//做拼接
				this.orders=[...this.orders,...orders]
				//页数加一
				this.page++;
				
				uni.hideLoading()
			},
			detail(id) {
				uni.navigateTo({
					url: '/pages/orders/detail?id=' + id
				})
			},
			review(order) {
				const date = order.completed_time.split(' ')[0]
				uni.navigateTo({
					url: '/pages/review/review?storename=' + order.store.name + '&typeCate=' + order.typeCate + '&date=' + date
				})
			},
			goToInvoice() {
				uni.navigateTo({
					url: '/pages/invoice/invoice'
				})
			},
			goMenu(){
				
				if(this.type==1) return
				
				if(this.seat==null||this.seat=={}){
					uni.navigateTo({
						url:'/pages/me/me'
					})
					return;
				}
				
				this.SET_TYPE(1)
				uni.redirectTo({
					url: '/pages/menu/menu'
				})
			},
			goOrder(){
				if (this.type == 2) return
				this.SET_TYPE(2)
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				console.log("dddds")
				uni.redirectTo({
					url: '/pages/orders/orders'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>



.nav {
	width: 100%;
	
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	
	.header {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #ffffff;
		height: 140rpx;

		.left {
			flex: 1;
			display: flex;
			flex-direction: column;

			.store-name {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: $font-size-lg;
				margin-bottom: 10rpx;

				.iconfont {
					margin-left: 10rpx;
					line-height: 100%;
				}
			}

			.store-location {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: $text-color-assist;
				font-size: $font-size-sm;

				.iconfont {
					vertical-align: middle;
					display: table-cell;
					color: $color-primary;
					line-height: 100%;
				}
			}
		}

		.right {
			background-color: $bg-color-grey;
			border-radius: 38rpx;
			display: flex;
			align-items: center;
			font-size: $font-size-sm;
			padding: 0 38rpx;
			color: $text-color-assist;
			
			.dinein, .takeout {
				position: relative;
				display: flex;
				align-items: center;
				&.active {
					padding: 14rpx 38rpx;
					color: #ffffff;
					background-color: $color-primary;
					border-radius: 38rpx;
				}
			}
			
			.takeout {
				margin-left: 20rpx;
				height: 100%;
				flex: 1;
				padding: 14rpx 0;
			}
			
			.dinein.active {
				margin-left: -38rpx;
			}

			.takeout.active {
				margin-right: -38rpx;
			}
		}
	}

	.coupon {
		flex: 1;
		width: 100%;
		background-color: $bg-color-primary;
		font-size: $font-size-base;
		color: $color-primary;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		overflow: hidden;
		
		.title {
			flex: 1;
			margin-left: 10rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		
		.iconfont {
			line-height: 100%;
		}
	}
}

</style>
